<template>
  <view class="">
    <view class="Allauthoriza">
      <uni-nav-bar title="授权验证" color="#333" :border="false" statusBar></uni-nav-bar>
      <view class="authoriza" v-if="userinfor">
        <view class="authoriza_top">
          <view class="">
            <text>{{ OtherName }}</text>
            <text>我加注,他买单</text>
          </view>
        </view>
        <view class="phones">
          <view class="phones_tel">
            <text style="font-size: 30rpx;">姓名</text>
            <input type="text" :placeholder="userinfor.realname ? userinfor.realname : '请输入姓名'" v-model="name"
              style="width: 80%;" @input="fpNumInput" maxlength="3" :disabled="userinfor.realname ? true : false" />
          </view>
          <view class="phones_tel">
            <text style="font-size: 30rpx;">手机号</text>
            <input type="number" :placeholder="userinfor.mobile ? userinfor.mobile : '请输入手机号码'" maxlength="11"
              v-model="phone" style="width: 80%;" :disabled="userinfor.mobile ? true : false" />
          </view>
          <view class="phones_tel" v-if="!userinfor.mobile">
            <text style="font-size: 30rpx;">验证码</text>
            <view class="phones_code">
              <input v-model="code" style="width: 50%;" placeholder="请输入验证码" type="number" maxlength="4" />
              <view class="_code" @click="handleCodeClick('100')">{{ textArea }}</view>
            </view>
          </view>
        </view>
        <view class="phone_bottom">
          <view class="" @click="submit()">接受</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { userInfo } from '@/gql/user';
  import { getDriverID } from '@/stores/driverID';
  import { showToast, successToast, showLoading } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { nextTick, ref, onMounted } from 'vue';
  import { useUserStore } from '@/stores/user';
  import { decrypt } from '@/utils/jsencrypt';
  const driver_id = getDriverID();

  const name = ref(''); //用户姓名
  const phone = ref('');
  const code = ref('');
  const textArea = ref('验证码');
  const btnBool = ref(true); //放重复点击

  const OtherName = ref('');
  const userinfor = useUserStore();
  const from_driver_id = ref('');

  const repeat = ref(true)//放重复点击

  const key = ref('')
  const all = ref()
  onMounted(() => {
    const loct = uni.getStorageSync('StoreData')
    console.log(loct)
    all.value = JSON.parse(decrypt(loct))
    from_driver_id.value = all.value.from_driver_id;
    key.value = all.value.key;
    setTimeout(()=>{
      others();
    },300)
  })
  /**
   * 获取授权人信息
   */
  function others() {
    const driver = Number(from_driver_id.value);
    const payload = {
      query: userInfo,
      variables: {
        driver_id: driver,
      },
    };
    toPublish('ql/driver/getDriverInfo', payload, (obj : any) => {
      const data = obj.data;
      OtherName.value = data.driver_info.nickname;
    });
  }
  /**
   * 正则输入的数据
   */
  function fpNumInput(e) {
    const { detail } = e;
    const inputRule = /[^\u4E00-\u9FA5]/g; ///只能输入中文
    const value = detail.value.replace(inputRule, '');
    nextTick(() => {
      name.value = value;
    });
  }
  /**
   * 正则手机号码
   */
  function phoneTel() {
    const mobile = /^1[3-9]\d{9}$/;
    const userPhone = phone.value ? phone.value : userinfor.mobile;
    return mobile.test(userPhone);
  }
  /**
   * 发送验证码
   */
  function handleCodeClick() {
    if (!phone.value) {
      showToast('手机号不能为空');
      return;
    } else if (!phoneTel()) {
      showToast('请输入正确的手机号码');
      return;
    }
    if (btnBool.value) {
      btnBool.value = false;
      const payload = {
        event: 'notice',
        mobile: phone.value,
      };
      toPublish('driver/sendSms', payload, (obj : any) => {
        console.log(obj);
      });
      successToast('发送成功');
      let i = 60;
      let timer = setInterval(() => {
        textArea.value = +i + 's';
        i--;
        if (i < 0) {
          btnBool.value = true;
          textArea.value = '验证码';
          clearInterval(timer);
        }
      }, 1000);
    } else {
      return;
    }
  }
  /**
   * 确认提交授权
   */
  function submit() {
    const mobile = phone.value ? phone.value : userinfor.mobile;
    const real_name = name.value ? name.value : userinfor.realname;
    if (!mobile || !real_name) {
      showToast('请将补全授权信息');
      return;
    } else if (!phoneTel()) {
      return;
    }
    showLoading('加载中')
    if (!repeat.value) {
      return
    }
    repeat.value = false
    const payload = {
      from_driver_id: from_driver_id.value,
      driver_id: driver_id,
      mobile: mobile,
      real_name: real_name,
      captcha: code.value,
      key: key.value
    };
    toPublish('driver/addEmpower', payload, (obj : any) => {
      const ref = obj;
      if (ref.code === 1) {
        successToast('授权成功');
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages/authorized/authorizedList',
          });
        }, 1500);
      } else {
        repeat.value = true
        showToast(ref.msg);
      }
    });
  }
</script>

<style lang="less">
  @import url('../authorized/less/addUthorization.less');
</style>